<!DOCTYPE html>
<meta charset="uft-8">
<html>
<head>
	<title>练习二</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 520px;
			height: 280px;
			margin: 0 auto;
			margin-top: 100px;
			position: relative;
			border: 1px solid black;
			overflow: hidden;
		}
		.left{
			width: 30px;
			height: 30px;
			border-radius: 100%; 
			overflow:hidden;
			background-color: rgba(0,0,0,0.3);
			font-size: 20px;
			color: white;
			text-align: right;
			position: absolute;
			top: 135px;
			left: -15px;
		}
		.right{
			width: 30px;
			height: 30px;
			border-radius: 100%; 
			overflow:hidden;
			background-color: rgba(0,0,0,0.3);
			font-size: 20px;
			color: white;
			text-align: left;
			position: absolute;
			top: 135px;
			right: -15px;
		}
		ul{
			list-style: none;
			width: 150px;
			height: 20px;
			position: absolute;
			bottom: 10px;
			left: 35%;
		}
		li{
			width: 30px;
			border: 1px inset white;
			box-sizing: border-box;
			float: left;
			text-align: center;
		}
	</style>
</head>
<body>
	<div>
		<img src="beijing.webp.jpg"></img>
		<span class="left">&lt;</span>
		<span class="right">&gt;</span>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</div>
</body>
</html>